<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>

<template>
  <view class="user">
    <!-- 个人信息 -->
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view class="header" @click="userDetail">
      <view class="head-1">
        <image :src="userInfo.avatar || userInfoRef.defaultImage"></image>
      </view>
      <view class="head-2" v-if="userInfo.id">
        <view class="user-name">{{ userInfo.nickname }}</view>
      </view>
      <view class="head-2" v-else>
        <view v-if="userInfoRef.isLogined" class="user-name">{{ userInfo.nickname }}</view>
        <view v-else class="user-name">登录/注册</view>
      </view>
      <uni-icons style="margin-top: 150rpx" type="right" size="20"></uni-icons>
    </view>
    <!-- 积分，优惠券，关注， -->
    <view class="pointBox box">
      <!-- 我的订单，代付款 -->
      <view class="order">
        <navigator
          :url="userInfoRef?.isLogined ? '/pages/order/pendingList' : '/pages/login/login'"
          open-type="navigate"
          hover-class="none"
        >
          <view class="order-item">
            <div class="bag bag2">
              <image class="order_icon" src="@/static/my/wait_pay.png" mode="scaleToFill" />
            </div>
            <view>闲置</view>
          </view>
        </navigator>
        <navigator
          :url="userInfoRef?.isLogined ? '/pages/order/inputList' : '/pages/login/login'"
          open-type="navigate"
          hover-class="none"
        >
          <view class="order-item">
            <div class="bag bag3">
              <image class="order_icon" src="@/static/my/wait_received.png" mode="scaleToFill" />
            </div>
            <view>借入记录</view>
          </view>
        </navigator>
        <navigator
          :url="userInfoRef?.isLogined ? '/pages/order/outputList' : '/pages/login/login'"
          open-type="navigate"
          hover-class="none"
        >
          <view class="order-item">
            <div class="bag bag4">
              <image class="order_icon" src="@/static/my/wait_comment.png" mode="scaleToFill" />
            </div>
            <view>借出记录</view>
          </view>
        </navigator>
        <view class="order-item">
          <div class="bag bag1">
            <image class="order_icon" src="@/static/my/contact.png" mode="scaleToFill" />
          </div>
          <view>客服</view>
          <button
            style="
              position: absolute;
              top: 0rpx;
              left: 0rpx;
              width: 100%;
              height: 100%;
              background-color: white;
              opacity: 0;
            "
            size="mini"
            open-type="contact"
          >
            客服
          </button>
        </view>
      </view>
    </view>

    <view class="container">
      <view class="func-row">
        <view
          class="func-item"
          v-for="item in functionList1"
          :key="item.id"
          @click="handleClick(item)"
        >
          <image class="func-icon" :src="item.icon"></image>
          <text class="func-text">{{ item.name }}</text>
        </view>
      </view>
      <view class="func-row">
        <view
          class="func-item"
          v-for="item in functionList2"
          :key="item.id"
          @click="handleClick(item)"
        >
          <image class="func-icon" :src="item.icon"></image>
          <text class="func-text">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <navigator
      :url="userInfoRef?.isLogined ? '/pages/my/feedback' : '/pages/login/login'"
      open-type="navigate"
      hover-class="navigator-hover"
    >
      <uni-section style="margin-bottom: 100rpx" title="意见反馈">
        <template v-slot:right>
          <uni-icons style="margin-top: 150rpx" type="right" size="20"></uni-icons>
        </template>
      </uni-section>
    </navigator>
    <!-- <uni-section class="mb-10" title="安全中心">
        <template v-slot:right>
          <uni-icons style="margin-top: 150rpx" type="right" size="20"></uni-icons>
        </template>
      </uni-section> -->
    <navigator url="/pages/my/about" open-type="navigate" hover-class="navigator-hover">
      <uni-section class="mb-10" title="关于">
        <template v-slot:right>
          <uni-icons style="margin-top: 150rpx" type="right" size="20"></uni-icons>
        </template>
      </uni-section>
    </navigator>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import { IUserInfo } from '@/types/user'

const couponNum = ref(0)
const footNum = ref(0)
const walletNum = ref(0)
const userInfo = ref<IUserInfo>({})
const userInfoRef = useUserStore()
const functionList1 = [
  { id: 1, name: '我的小组', icon: '/static/my/group.png', link: '/pages/group/groupList' },
  { id: 2, name: '备忘提醒', icon: '/static/my/remind.png', link: '/pages/my/remind' },
  { id: 3, name: '"留言板"', icon: '/static/my/robt.png', link: '/pages/ai/ai' },
  { id: 4, name: '聊天记录生成', icon: '/static/my/talkRecord.png', link: '/pages-sub/talkRecord' },
]
const functionList2 = [
  { id: 5, name: '抽奖', icon: '/static/my/dish.png', link: '/pages/my/dish/index' },
  { id: 6, name: 'dota', icon: '/static/my/dota.png', link: '/pages/my/dota' },
  { id: 7, name: '待开发', icon: '/static/my/building.png', link: '/pages/group/groupList' },
]

onShow(() => {
  userInfo.value = userInfoRef.userInfo
  couponNum.value = 0
  footNum.value = 0
  walletNum.value = 0
  // uni.setTabBarItem({
  //   index: 0,
  //   text: 'aaas',
  // })
})
const userDetail = () => {
  if (userInfoRef.isLogined) {
    uni.navigateTo({ url: '/pages/my/info' })
  } else {
    uni.navigateTo({ url: '/pages/login/login' })
  }
}

const handleClick = (item) => {
  if (item.name === '待开发') {
    uni.showToast({
      title: '待开发功能',
      icon: 'none',
    })
    return
  }
  if (userInfoRef.isLogined) {
    uni.navigateTo({ url: item.link })
  } else {
    uni.navigateTo({ url: '/pages/login/login' })
  }

  // 实际开发中替换为：
  // uni.navigateTo({ url: `/pages/${item.id}/index` })
}
</script>

<style lang="scss">
html,
body {
  overflow: auto;
}

.money {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.user {
  background-color: #f7f7f7;
  .header {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    height: calc(var(--status-bar-height) + 360rpx);
    padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
    color: #ffffff;
    background-image: url('/static/my/111.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    border-bottom-right-radius: 30rpx;
    border-bottom-left-radius: 30rpx;

    .head-1 {
      position: relative;
      display: flex;
      align-items: center;
      width: 152rpx;
      text-align: center;

      image {
        width: 152rpx;
        height: 144rpx;
        margin-bottom: 30rpx;
        border: 3px solid #fff;
        border-radius: 50%;
      }

      .edti-head {
        position: absolute;
        top: 100rpx;
        right: 0;
        width: 40rpx;
        height: 40rpx;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .head-2 {
      flex: 1;
      margin-top: 150rpx;
      margin-left: 30rpx;
      line-height: 1;
    }
  }

  .pointBox {
    width: 94%;
    padding-top: 20rpx;
    margin: 0 3%;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
  }

  .point {
    height: 160rpx;
    padding: 24rpx;
    // #ifdef MP-WEIXIN
    font-size: 24rpx;
    text-align: center;

    // #endif
    .uni-col {
      view {
        font-size: 28rpx;
        color: #303133;
      }

      view:last-child {
        margin-top: 8rpx;
        font-size: 32rpx;
        color: #ff3c2a;
      }
    }
  }

  .order {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 140rpx;
    padding: 0 3%;
    font-size: 24rpx;
    color: #999;
    text-align: center;

    .order-item {
      position: relative;
      width: 96rpx;
      line-height: 2em;

      :first-child {
        margin-bottom: 10rpx;
        font-size: 48rpx;
      }
    }
    .contact-item {
      position: relative;
    }
  }
}

.box {
  transform: translateY(-30rpx);
}

.user-name {
  font-size: 34rpx;
  color: #000000;
}

.bag {
  width: 76rpx;
  height: 76rpx;
  margin: 0 auto;
  border-radius: 50%;
}

.bag1 {
  background: #ff4a48;
}

.bag2 {
  background: #ff992f;
}

.bag3 {
  background: #009ee0;
}

.bag4 {
  background: #00d5d5;
}

.bag5 {
  background: #28ccb0;
}
.order_icon {
  transform: scale(0.7);
}

.uni-wrap {
  flex: 1;
  flex-direction: column;
  /* #ifdef H5 */
  height: calc(100vh - 44px);
  /* #endif */
  /* #ifndef H5 */
  height: 100vh;
  /* #endif */

  background-color: #f7f7f7;
}

.mb-10 {
  margin-bottom: 20px;
}

.container {
  padding: 10rpx;
  margin-top: 10rpx;

  .func-row {
    display: flex;
    justify-content: start;
    margin-bottom: 40rpx;

    .func-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;

      .func-icon {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 10rpx;
      }

      .func-text {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}
</style>
